<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #data td{
            text-align: center;
        }
    </style>
    <script src="jquery-3.2.1.min.js"></script>
    <script>
        $(function () {
            $("#data :text").blur(function () {
                changeNum($(this));
            })

            $("#data :button").click(function () {
                removeProduct($(this));
            })

            totalPrice();
        })

        function changeNum(txtObj) {
            var num = parseInt(txtObj.val());
            if(isNaN(num)){
                num = 1;
            }
            txtObj.val(num);
            //prev()为上一个兄弟元素
            var price = txtObj.parent().prev().html();
            //next()下一个兄弟元素
            txtObj.parent().next().html(price*num);
            totalPrice();
        }

        function removeProduct(btnObj) {
            btnObj.parents("tr").remove();
            totalPrice();
        }

        function totalPrice() {
            let price = 0;
            var trArray = $("#data").find("tr");
            for(var i = 0; i < trArray.length; i++){
                price += parseInt($(trArray[i]).find("td")[3].innerHTML);
            }
            $("#totalSpan").html(price);
        }

    </script>
</head>
<body>
    <table border="1" cellspacing="0" width="60%">
        <thead>
            <tr><th>商品名</th><th>单价</th><th>数量</th><th>单项总价</th><th>操作</th></tr>
        </thead>
        <tbody id="data">
            <tr><td>汉堡</td><td>5</td><td><input type="text" value="1"></td>
                <td>5</td><td><input type="button" value="移除商品"></td></tr>
            <tr><td>可乐</td><td>3</td><td><input type="text" value="1"></td>
                <td>3</td><td><input type="button" value="移除商品"></td></tr>
            <tr><td>爆米花</td><td>8</td><td><input type="text" value="1"></td>
                <td>8</td><td><input type="button" value="移除商品"></td></tr>
            <tr><td>豆花</td><td>4</td><td><input type="text" value="1"></td>
                <td>4</td><td><input type="button" value="移除商品"></td></tr>
        </tbody>
    </table>
    购物车总价:¥<span id="totalSpan"></span>
</body>
</html>